<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Chart Example</title>
<!--<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->
<script src="javascript/jquery-2.2.4.min.js"></script>
<script src="javascript/moment-with-locales.min.js"></script>
<script src="javascript/moment-duration-format.min.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/chart.min.js"></script>
<!--<script type="text/javascript" src="javascript/chart.js_master/chart.min_v2.9.4.js"></script>-->
<script type="text/javascript" src="javascript/chart.js_master/utils.js"></script>
<script type="text/javascript" src="javascript/jspdf.min.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/chartjs-plugin-datalabels.min.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/chartjs-adapter-moment.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>-->
</head>
<body>
<div id="canvas-wrapper" style="width:100%" class="">
<canvas id="show-chart-here"></canvas>
</div>
<script>
// Sample data from the JSON provided
const jsonData = {
"header": {
"pHUB_WEBNAM": "HUB_IMPLOG",
"pFrom_TIMESTAMP": "0001-01-01-00.00.00.000000",
"pTo_TIMESTAMP": "9999-12-31-24.00.00.000000"
},
"data": [
{
"counter": 4,
"HUB_WEBNAM": "HUB_IMPLOG",
"HUB_PACKNO": 0,
"HUB_PRODID": "",
"HUB_STRCAL": "2024-11-01-15.23.06.964312",
"HUB_ENDCAL": "2024-11-01-15.23.06.993395",
"HUB_SECOND": 0.029083,
"HUB_MSECND": 29083,
"HUB_INPTXT": "pWhatToCall=*WAITING_FOR_IMPORT / pDirName= / pNumberOfFiles=100 / pIFS_File_Path=",
"HUB_RPYCOD": "00",
"HUB_RPYTXT": "",
"HUB_IFSFIL": "",
"HUB_TIMSTP": "2024-11-01-15.23.06.998049"
},
{
"counter": 5,
"HUB_WEBNAM": "HUB_IMPLOG",
"HUB_PACKNO": 0,
"HUB_PRODID": "",
"HUB_STRCAL": "2024-11-01-15.22.39.656749",
"HUB_ENDCAL": "2024-11-01-15.22.39.974184",
"HUB_SECOND": 0.317435,
"HUB_MSECND": 317435,
"HUB_INPTXT": "pWhatToCall=*SUPERSEARCH / pDirName= / pNumberOfFiles=100 / pIFS_File_Path=",
"HUB_RPYCOD": "00",
"HUB_RPYTXT": "",
"HUB_IFSFIL": "",
"HUB_TIMSTP": "2024-11-01-15.22.39.976919"
},
{
"counter": 6,
"HUB_WEBNAM": "HUB_IMPLOG",
"HUB_PACKNO": 0,
"HUB_PRODID": "",
"HUB_STRCAL": "2024-11-01-15.22.15.904066",
"HUB_ENDCAL": "2024-11-01-15.22.15.969961",
"HUB_SECOND": 0.065895,
"HUB_MSECND": 65895,
"HUB_INPTXT": "pWhatToCall=*WAITING_FOR_IMPORT / pDirName= / pNumberOfFiles=100 / pIFS_File_Path=",
"HUB_RPYCOD": "00",
"HUB_RPYTXT": "",
"HUB_IFSFIL": "",
"HUB_TIMSTP": "2024-11-01-15.22.15.972846"
},
{
"counter": 7,
"HUB_WEBNAM": "HUB_IMPLOG",
"HUB_PACKNO": 0,
"HUB_PRODID": "",
"HUB_STRCAL": "2024-11-01-15.22.10.238684",
"HUB_ENDCAL": "2024-11-01-15.22.10.303180",
"HUB_SECOND": 0.064496,
"HUB_MSECND": 64496,
"HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=0 / pIFS_File_Path=",
"HUB_RPYCOD": "00",
"HUB_RPYTXT": "",
"HUB_IFSFIL": "",
"HUB_TIMSTP": "2024-11-01-15.22.10.306007"
},
{
"counter": 8,
"HUB_WEBNAM": "HUB_IMPLOG",
"HUB_PACKNO": 0,
"HUB_PRODID": "",
"HUB_STRCAL": "2024-11-01-15.22.03.780675",
"HUB_ENDCAL": "2024-11-01-15.22.03.821209",
"HUB_SECOND": 0.040534,
"HUB_MSECND": 40534,
"HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=0 / pIFS_File_Path=",
"HUB_RPYCOD": "00",
"HUB_RPYTXT": "",
"HUB_IFSFIL": "",
"HUB_TIMSTP": "2024-11-01-15.22.03.824666"
},
{
"counter": 9,
"HUB_WEBNAM": "HUB_IMPLOG",
"HUB_PACKNO": 0,
"HUB_PRODID": "",
"HUB_STRCAL": "2024-11-01-15.22.02.614261",
"HUB_ENDCAL": "2024-11-01-15.22.02.633407",
"HUB_SECOND": 0.019146,
"HUB_MSECND": 19146,
"HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=0 / pIFS_File_Path=",
"HUB_RPYCOD": "00",
"HUB_RPYTXT": "",
"HUB_IFSFIL": "",
"HUB_TIMSTP": "2024-11-01-15.22.02.637409"
},
{
"counter": 10,
"HUB_WEBNAM": "HUB_IMPLOG",
"HUB_PACKNO": 0,
"HUB_PRODID": "",
"HUB_STRCAL": "2024-11-01-15.21.55.076754",
"HUB_ENDCAL": "2024-11-01-15.21.55.130926",
"HUB_SECOND": 0.054172,
"HUB_MSECND": 54172,
"HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=0 / pIFS_File_Path=",
"HUB_RPYCOD": "00",
"HUB_RPYTXT": "",
"HUB_IFSFIL": "",
"HUB_TIMSTP": "2024-11-01-15.21.55.133799"
},
{
"counter": 11,
"HUB_WEBNAM": "HUB_IMPLOG",
"HUB_PACKNO": 0,
"HUB_PRODID": "",
"HUB_STRCAL": "2024-11-01-15.21.52.096592",
"HUB_ENDCAL": "2024-11-01-15.21.52.206689",
"HUB_SECOND": 0.110097,
"HUB_MSECND": 110097,
"HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=0 / pIFS_File_Path=",
"HUB_RPYCOD": "00",
"HUB_RPYTXT": "",
"HUB_IFSFIL": "",
"HUB_TIMSTP": "2024-11-01-15.21.52.209611"
},
{
"counter": 12,
"HUB_WEBNAM": "HUB_IMPLOG",
"HUB_PACKNO": 0,
"HUB_PRODID": "",
"HUB_STRCAL": "2024-11-01-15.21.45.663630",
"HUB_ENDCAL": "2024-11-01-15.21.45.733114",
"HUB_SECOND": 0.069484,
"HUB_MSECND": 69484,
"HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=100 / pIFS_File_Path=",
"HUB_RPYCOD": "00",
"HUB_RPYTXT": "",
"HUB_IFSFIL": "",
"HUB_TIMSTP": "2024-11-01-15.21.45.736117"
},
{
"counter": 13,
"HUB_WEBNAM": "HUB_IMPLOG",
"HUB_PACKNO": 0,
"HUB_PRODID": "",
"HUB_STRCAL": "2024-11-01-15.21.03.534688",
"HUB_ENDCAL": "2024-11-01-15.21.03.548141",
"HUB_SECOND": 0.013453,
"HUB_MSECND": 13453,
"HUB_INPTXT": "pWhatToCall=*DIRNAME / pDirName=2024-10-30 / pNumberOfFiles=2 / pIFS_File_Path=",
"HUB_RPYCOD": "00",
"HUB_RPYTXT": "",
"HUB_IFSFIL": "",
"HUB_TIMSTP": "2024-11-01-15.21.03.553620"
},
{
"counter": 14,
"HUB_WEBNAM": "HUB_IMPLOG",
"HUB_PACKNO": 0,
"HUB_PRODID": "",
"HUB_STRCAL": "2024-11-01-15.20.47.171913",
"HUB_ENDCAL": "2024-11-01-15.20.47.240510",
"HUB_SECOND": 0.068597,
"HUB_MSECND": 68597,
"HUB_INPTXT": "pWhatToCall=subrReadIFSdir / pDirName= / pNumberOfFiles=0 / pIFS_File_Path=",
"HUB_RPYCOD": "00",
"HUB_RPYTXT": "",
"HUB_IFSFIL": "",
"HUB_TIMSTP": "2024-11-01-15.20.47.243604"
},
{
"counter": 15,
"HUB_WEBNAM": "HUB_IMPLOG",
"HUB_PACKNO": 0,
"HUB_PRODID": "",
"HUB_STRCAL": "2024-11-01-15.20.35.267610",
"HUB_ENDCAL": "2024-11-01-15.20.35.294615",
"HUB_SECOND": 0.027005,
"HUB_MSECND": 27005,
"HUB_INPTXT": "pWhatToCall=*DIRNAME / pDirName=2024-10-30 / pNumberOfFiles=2 / pIFS_File_Path=",
"HUB_RPYCOD": "00",
"HUB_RPYTXT": "",
"HUB_IFSFIL": "",
"HUB_TIMSTP": "2024-11-01-15.20.35.298019"
}
]
};
// Parsing the data for the chart
const labels = jsonData.data.map(entry => entry.HUB_TIMSTP);
const dataPoints = jsonData.data.map(entry => entry.HUB_SECOND);
// Chart.js configuration
const ctx = document.getElementById('show-chart-here').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'HUB_SECOND',
data: dataPoints,
borderColor: 'blue',
borderWidth: 2,
fill: false
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: `${jsonData.header.pHUB_WEBNAM}, ${jsonData.header.pFrom_TIMESTAMP}, ${jsonData.header.pTo_TIMESTAMP}`,
font: {
size: 16
}
},
tooltip: {
callbacks: {
label: function(context) {
const entry = jsonData.data[context.dataIndex];
return [
`HUB_WEBNAM: ${entry.HUB_WEBNAM}`,
`HUB_STRCAL: ${entry.HUB_STRCAL}`,
`HUB_ENDCAL: ${entry.HUB_ENDCAL}`,
`HUB_SECOND: ${entry.HUB_SECOND}`,
`HUB_MSECND: ${entry.HUB_MSECND}`,
`HUB_TIMSTP: ${entry.HUB_TIMSTP}`
];
}
},
backgroundColor: 'black',
titleColor: 'white',
bodyColor: 'white',
borderColor: 'white',
borderWidth: 1,
displayColors: false
}
},
scales: {
x: {
type: 'time',
time: {
parser: 'YYYY-MM-DD-HH.mm.ss.SSSSSS', // Adjusted parser for full timestamp format
tooltipFormat: 'YYYY-MM-DD HH.mm.ss', // Tooltip format
displayFormats: {
millisecond: 'YYYY-MM-DD HH:mm:ss.SSS', // Display format for x-axis labels
second: 'YYYY-MM-DD HH:mm:ss',
minute: 'YYYY-MM-DD HH:mm',
hour: 'YYYY-MM-DD HH'
}
},
title: {
display: true,
text: 'HUB_TIMSTP'
}
}, y: {
title: {
display: true,
text: 'HUB_SECOND'
}
}
}
}
});
</script>
</body>
</html>